<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        X-admin v1.0
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../static/css/x-admin.css" media="all">
    <link rel="stylesheet" href="../../static/css/dj-css.css">
    <link rel="stylesheet" type="text/css" href="../notice/list.css">
</head>
<body>
<div class="x-body" id="newsApp">

    <div class="clearfix">
        <form class="layui-form fl" action="">
            <div class="layui-form-item  clearfix">
                <div class="layui-inline">
                    <label class="layui-form-label" style="font-weight:bold;">用户名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input" v-model="name" placeholder="请输入用户姓名">
                    </div>
                </div>

            </div>
        </form>
        <div class="layui-btn-group fl " style="margin-left:30px;">
            <button class="layui-btn" @click="check">查询</button>
            <button class="layui-btn but-green" onclick="admin_add('新增','add.html','800','500')">添加</button>
        </div>
    </div>
<div >
    <table class="">
        <thead>
        <tr>
            <th  @click="allChose" class="por w40">
                <input id="allChecked" class="checkbox allChose" :checked="allChoseFlag"  type="checkbox" name="like1[write]" lay-filter="allChoose">
                <i class="layui-icon" :class="{'checkedColor':allChoseFlag}">&#xe618;</i>
            </th>
            <th>姓名</th>
            <th>手机号</th>
            <th>身份证</th>
            <th>生日</th>
            <th>性别</th>
            <th>病案号</th>
            <th style="width: 300px;">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="news in newsLists"  v-if="news.id">
            <td class="por" @click="selectSelf(news)">
                <input class="checkbox"  type="checkbox" name="" :checked="news.checked" >
                <i class="layui-icon"  :class="{'checkedColor':news.checked}">&#xe618;</i>
            </td>
            <td v-text="news.userName"></td>
            <td v-text="news.phoneNumber"></td>
            <td v-text="news.idCard"></td>
            <td v-text="news.birthday"></td>
            <td>{{news.sex |sexFilter}}</td>
            <td v-text="news.patientNumber"></td>
            <td>
                <div class="layui-btn-group flexBox">
                    <button class="layui-btn" @click="admin_edits(news.id)">编辑</button>
                    <button class="layui-btn but-orange" @click="admin_del(this,'../../qsuser/delete.do?id='+news.id)">删除</button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div id="page" class="fs14 fl"></div>
    <div class="layui-laypage-curr pageHideFlag" style="text-align: center;line-height: 30px;height:30px;margin-top:10px;font-size: 0;float:left;">
        <span class="layui-laypage-next" style="display: inline-block;height:28px;font-size: 12px;color:#333;border:1px solid #e2e2e2;padding:0 10px;">
            共 {{totalNum}} 条数据
        </span>
    </div>
    <div class="layui-laypage-curr pageShowFlag" style="display: none;text-align: center;line-height: 30px;height:30px;margin-top:10px;font-size: 0;float:left;">

        <span class="layui-laypage-curr" style="display: inline-block;width:38px;height:30px;background: #5eabed;border:1px solid #5eabed;">
            <em style="font-style: normal;font-size: 12px;color:#fff;">1</em>
        </span>
        <span class="layui-laypage-next" style="display: inline-block;height:30px;font-size: 12px;color:#333;border:1px solid #e2e2e2;padding:0 10px;">
            共 {{totalNum}} 条数据
        </span>
    </div>
</div>


</div>
<script src="../../static/lib/jquery.min.js"></script>
<script src="../../static/lib/layui/layui.js" charset="utf-8"></script>
<script src="../../static/lib/vue.min.js"></script>
<script src="../../static/lib/x-layui.js"></script>
<script src="../../static/lib/dj-js.js"></script>
<script>
    var VM = new Vue({
        el:'#newsApp',
        data:{
            totalNum:'',
            newsTypeList:[],
            name:'',
            author:'',
            newsType:'',
            newsLists:[],
            allChoseFlag:false
        },
        filters:{
            sexFilter:function(value){
                if(value == "1"){
                    return "女";
                }else if(value == "0"){
                    return "男";
                }
            }
        },
        created:function(){
            this.lay();
            this.getNewsTypeList();
        },
        methods:{
            lay:function(){
                var _this = this;
                layui.use(['laydate','element','laypage','layer','form'], function(){
                    var form = layui.form();
                    $ = layui.jquery;//jquery
                    laydate = layui.laydate;//日期插件
                    lement = layui.element();//面包导航
                    laypage = layui.laypage;//分页
                    layer = layui.layer;//弹出层

                    //以上模块根据需要引入
                    getPageData(1);
                    /*请求后台数据，分页请求*/
                    function getPageData(curr) {
                        $.ajax({
                            url:"../../qsuser/list.do?pagenum="+curr+"&pagesize="+5,
                            dataType:"json",
                            type:"POST",
                            async:false,
                            success:function (res) {
                                if(res.msg=="success"){
                                    var list = res.result.dataList;
                                    _this.newsLists = list;
                                    laypage.pages = res.result.total;

                                    _this.totalNum = res.result.total;
                                    //当只有一页时
                                    if(res.result.total > 5){
                                        $(".pageShowFlag").css({"display":"none"});
                                        $(".pageHideFlag").css({"display":"block"});
                                    }else if(res.result.total > 0 ){
                                        $(".pageShowFlag").css({"display":"block"});
                                        $(".pageHideFlag").css({"display":"none"});
                                    }else{
                                        $(".pageShowFlag").css({"display":"none"});
                                        $(".pageHideFlag").css({"display":"none"});
                                        layer.msg("没有查询到数据！", {icon: 1});
                                    }
                                laypage({
                                    cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page"></div>
                                    pages: Math.ceil(res.result.total/5), //通过后台拿到的总页数
                                    curr: curr || 1, //当前页
                                    jump: function(obj, first){ //触发分页后的回调
                                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                                            getPageData(obj.curr);
                                        }
                                    }
                                });
                    }else{
                        layer.msg("没有查询到数据！", {icon: 1})
                    }
                            },
                            error:function (XMLHttpRequest) {
                                layer.msg("系统错误", {icon: 1});
                            }
                        })
                    }
                    var start = {
                        min: laydate.now()
                        ,max: '2099-06-16 23:59:59'
                        ,istoday: false
                        ,choose: function(datas){
                            end.min = datas; //开始日选好后，重置结束日的最小日期
                            end.start = datas //将结束日的初始值设定为开始日
                        }
                    };

                    var end = {
                        min: laydate.now()
                        ,max: '2099-06-16 23:59:59'
                        ,istoday: false
                        ,choose: function(datas){
                            start.max = datas; //结束日选好后，重置开始日的最大日期
                        }
                    };
                    /*全选checked*/
                    $("#allChecked").click(function () {
                        if ($(this).is(':checked')) {
                            $("input:checkbox").prop('checked', true)
                        } else {
                            $("input:checkbox").prop('checked', false)
                        }
                    });


                });
            },
            getNewsTypeList:function(){
                var _this = this;
                $.ajax({
                    url:"../../dictionaries/getDic.do?type=news",
                    dataType:"json",
                    type:"POST",
                    async:false,
                    success:function (res) {
                        _this.newsTypeList  = res;
                    }

                })
            },
            allChose:function(){
                var _this = this;
                this.allChoseFlag = !this.allChoseFlag;
                this.newsLists.forEach(function(item,index){
                    if(typeof item.checked == "undefined"){
                        Vue.set(item,"checked",true);
                    }else{
                        item.checked = _this.allChoseFlag;
                    }
                });
            },
            selectSelf:function(item){
                if(typeof item.checked == "undefined"){
                    Vue.set(item,"checked",true);
                }else{
                    item.checked = !item.checked;
                }
            },
            admin_edits:function(itemId){

                    admin_edit("编辑","../../qsuser/info.do?id="+ itemId,itemId,'800','500')
            },
            admin_del:function(itemId,url){
                admin_del(itemId,url);

            },
            admin_rePsd:function(itemId){},
            check:function(){
                var _this = this;
                _this.newsType = $("#newsType").attr("selectedCode");
//                console.log(_this.newsType);
                getPageData(1);
                function getPageData(curr) {
                    $.ajax({
                        url:"../../qsuser/list.do?pagenum="+curr+"&pagesize="+5,
                        dataType:"json",
                        data:{"userName":_this.name},
                        type:"POST",
                        async:false,
                        success:function (res) {

                            _this.totalNum = res.result.total;
                            //当只有一页时
                            if(res.result.total > 5){
                                $(".pageShowFlag").css({"display":"none"});
                                $(".pageHideFlag").css({"display":"block"});
                            }else if(res.result.total > 0 ){
                                $(".pageShowFlag").css({"display":"block"});
                                $(".pageHideFlag").css({"display":"none"});
                            }else{
                                $(".pageShowFlag").css({"display":"none"});
                                $(".pageHideFlag").css({"display":"none"});
                                layer.msg("没有查询到数据！", {icon: 1});
                            }

                            if(res.msg=="success"){

                                var list = res.result.dataList;
                                _this.newsLists = list;
                                laypage.pages = res.result.total;
                                laypage({
                                    cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page"></div>
                                    pages: Math.ceil(res.result.total/5), //通过后台拿到的总页数
                                    curr: curr || 1, //当前页
                                    jump: function(obj, first){ //触发分页后的回调
                                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                                            getPageData(obj.curr);
                                        }
                                    }
                                });
                            }else{
                                layer.msg("没有查询到数据！", {icon: 5})
                            }
                        },
                        error:function (XMLHttpRequest) {
                            layer.msg("系统错误", {icon: 5});
                        }
                    })
                }
            }

        }
    });




</script>
</body>
</html>